<script setup lang="ts">
import { ref } from 'vue'
const list = ref([
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '公示中'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    },
    {
        title: '山东高速服务开发集团服务区重卡换...',
        address: '山东省济南市',
        date: '2025-07-30',
        status: '已结束'
    }
    
])
</script>
<template>
    <div class="gap-[16px] h-[560px]">
        <div class="h-1/2 relative">
            <div class="absolute right-[0px] top-[0px] zsl-bg h-full w-[400px]"></div>
            <div class="h-3/7 bg-[#FFF]"></div>
            <div class="h-4/7" style="background: linear-gradient(270deg, #2C91EB 0%, #0973CA 100%);">
                <div class="h-full w-3/4 flex justify-center items-center">
                    <div class="w-1/3 h-full flex flex-col justify-center items-center">
                        <div class="text-[16px] text-[#FFF]">促成租赁需求</div>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#FFF] font-[700]">1456</div>
                            <div class="ml-[4px] mb-[6px] text-[#FFF] font-[500]">次</div>
                        </div>
                    </div>
                    <div class="w-1/3 h-full flex flex-col justify-center items-center">
                        <div class="text-[16px] text-[#FFF]">合同金额</div>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#FFF] font-[700]">1456</div>
                            <div class="ml-[4px] mb-[6px] text-[#FFF] font-[500]">亿</div>
                        </div>
                    </div>
                    <div class="w-1/3 h-full flex flex-col justify-center items-center">
                        <div class="text-[16px] text-[#FFF]">节资率</div>
                        <div class="flex items-end">
                            <div class="text-[32px] text-[#FFF] font-[700]">56</div>
                            <div class="ml-[4px] mb-[6px] text-[#FFF] font-[500]">%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h-1/2 flex flex-wrap justify-between items-center">
            <div v-for="(item, index) in list" :key="index" class="rounded-[10px] flex flex-col justify-around pl-[20px] border-[#D5E0FF] relative" style="box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); width: 24%;height:44%;">
                <div class="text-[16px] text-[#333333]">{{ item.title }}</div>
                <div class="text-[14px] text-[#666666] flex">
                    <img src="../assets/image/address.png" style="width: 1rem;height: 1.2rem" />
                    <div class="ml-[8px]">{{ item.address }}</div>
                </div>
                <div class="text-[14px] text-[#666666] flex items-center">
                    <img src="../assets/image/date.png" style="width: 1rem; height: 1rem" />
                    <div class="ml-[8px]">{{ item.date }}</div>
                </div>
                <div class="absolute right-[0px] bottom-[0px] flex justify-center items-center text-[#fff] rounded-tl-[10px] rounded-br-[10px]" style="width:80px;height: 32px;" :style="{background: item.status === '公示中' ? 'linear-gradient(270deg, #2C91EB 0%, #0973CA 100%)' : 'linear-gradient(270deg, #CACACA 0%, #929292 100%)'}">{{ item.status }}</div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.zsl-bg {
    background-image: url('../assets/image/zsl-bg.png');
    background-size: 100% 100%;
}
</style>
